<template>
  <div>
    <List :nameList="nameList">
      <template :nameLiat="nameList">
     <h2 class="header">学生列表</h2>
      </template>

      <template #nameItem="{person}">
        <li :style="{background:person.age<18?'red':''}">
          {{person.name}}-----{{person.age}}
        </li>
      </template>
    </List>
  </div>
</template>

<script>
import List from "@/components/List"
export default {
name:"App",
components:{
  List
},
data(){
  return{
    nameList:[
       { id: "001", name: "张三", age: 20 },
        { id: "002", name: "李四", age: 10 },
        { id: "003", name: "王五", age: 22 },
        { id: "004", name: "赵六", age: 14 },
        { id: "005", name: "郑七", age: 50 },
        { id: "006", name: "老八", age: 41 },
        { id: "007", name: "小九", age: 12 },
    ]
  }
}
}
</script>

<style scoped>
.typeList{
  display: flex;
  justify-content: space-around;
}
.header{
  background: orchid;
}
</style>